<ion-view class="nav-animation" title="">
  <ion-nav-buttons side="left">
    <span style="padding-top:5px;line-height: 30px;height: 30px;font-size: 30px;margin-left: 10px;font-weight: bolder">
      {{selectedData.date|date:'M'}}月
    </span>
    <span style="padding-top:5px;line-height: 15px;height: 30px;font-size: 10px;">
     周{{selectedData.weekday}}<br>{{selectedData.date|date:'y'}}年
    </span>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
    <div class="today" style="margin-right: 10px" ng-click="today()">
      <div style="width: 100%;height: 30px;line-height: 30px;overflow: hidden;text-align: center">今天</div>
    </div>
  </ion-nav-buttons>
  <div class="calendar-grid-header-row">
    <span class="calendar-grid-header-col" style="border: none;padding: 0px" ng-repeat="weekname in weeknames">{{weekname}}</span>
  </div>
  <ion-content>
    <ion-slide-box class="calendar-slide" show-pager="false" active-slide="curIndex" does-continue="true"
                   on-slide-changed="onSlideChange(index)">
      <ion-slide>
        <div ng-repeat="row in data0">
          <div class="calendar-grid-row">
            <div class="calendar-grid-col" ng-repeat="col in row" ng-click="dateClick(col)"
                 ng-class="{'calendar-grid-col-selected':col.date==selectedData.date}">
              <div class="calendar-grid-col-label" ng-class="{out:!col.include}">{{col.date|date:"d"}}</div>
              <div style="position:relative;margin-left: -1px;margin-right: -1px" ng-if="col.tasks.length>0">
                <div class="procBar"
                     style="top: 0px;"
                     ng-if="showProce(col,1)!=-1"
                     ng-class="{red:showProce(col,1)==0,yellow:showProce(col,1)==1,blue:showProce(col,1)==2,green:showProce(col,1)==3}">
                  {{showHead(col,1)}}
                </div>
                <div class="procBar"
                     style="top: 15px;"
                     ng-if="showProce(col,2)!=-1"
                     ng-class="{red:showProce(col,2)==0,yellow:showProce(col,2)==1,blue:showProce(col,2)==2,green:showProce(col,2)==3}">
                  {{showHead(col,2)}}
                </div>
                <div class="procBar"
                     style="top: 30px;"
                     ng-if="showProce(col,3)!=-1"
                     ng-class="{red:showProce(col,3)==0,yellow:showProce(col,3)==1,blue:showProce(col,3)==2,green:showProce(col,3)==3}">
                  {{showHead(col,3)}}
                </div>
              </div>
            </div>
          </div>
          <ion-list ng-if="$index===selectedData.weekindex" class="date-form">
            <ion-item style="font-size: 13px;" class="item-icon-left item-borderless"
                      ng-repeat="task in selectedData.tasks">
              <i style="font-size: 18px" class="icon"
                 ng-class="{'ion-ios-clock-outline':task.finish==0,'ion-ios-checkmark-outline':task.finish==1}"></i>
              <span
                style="font-weight: bolder">{{task.name}}</span>
              <span
                style="float: right">{{task.dt}}</span>
            </ion-item>
          </ion-list>
        </div>
      </ion-slide>
      <ion-slide>
        <div ng-repeat="row in data">
          <div class="calendar-grid-row">
            <div class="calendar-grid-col" ng-repeat="col in row" ng-click="dateClick(col)"
                 ng-class="{'calendar-grid-col-selected':col.date==selectedData.date}">
              <div class="calendar-grid-col-label" ng-class="{out:!col.include}">{{col.date|date:"d"}}</div>
              <div style="position:relative;margin-left: -1px;margin-right: -1px" ng-if="col.tasks.length>0">
                <div class="procBar"
                     style="top: 0px;"
                     ng-if="showProce(col,1)!=-1"
                     ng-class="{red:showProce(col,1)==0,yellow:showProce(col,1)==1,blue:showProce(col,1)==2,green:showProce(col,1)==3}">
                  {{showHead(col,1)}}
                </div>
                <div class="procBar"
                     style="top: 15px;"
                     ng-if="showProce(col,2)!=-1"
                     ng-class="{red:showProce(col,2)==0,yellow:showProce(col,2)==1,blue:showProce(col,2)==2,green:showProce(col,2)==3}">
                  {{showHead(col,2)}}
                </div>
                <div class="procBar"
                     style="top: 30px;"
                     ng-if="showProce(col,3)!=-1"
                     ng-class="{red:showProce(col,3)==0,yellow:showProce(col,3)==1,blue:showProce(col,3)==2,green:showProce(col,3)==3}">
                  {{showHead(col,3)}}
                </div>
              </div>
            </div>
          </div>
          <ion-list ng-if="$index===selectedData.weekindex" class="date-form">
            <ion-item style="font-size: 13px;" class="item-icon-left item-borderless"
                      ng-repeat="task in selectedData.tasks">
              <i style="font-size: 18px" class="icon"
                 ng-class="{'ion-ios-clock-outline':task.finish==0,'ion-ios-checkmark-outline':task.finish==1}"></i>
              <span
                style="font-weight: bolder">{{task.name}}</span>
              <span
                style="float: right">{{task.dt}}</span>
            </ion-item>
          </ion-list>
        </div>
      </ion-slide>
      <ion-slide>
        <div ng-repeat="row in data1">
          <div class="calendar-grid-row">
            <div class="calendar-grid-col" ng-repeat="col in row" ng-click="dateClick(col)"
                 ng-class="{'calendar-grid-col-selected':col.date==selectedData.date}">
              <div class="calendar-grid-col-label" ng-class="{out:!col.include}">{{col.date|date:"d"}}</div>
              <div style="position:relative;margin-left: -1px;margin-right: -1px" ng-if="col.tasks.length>0">
                <div class="procBar"
                     style="top: 0px;"
                     ng-if="showProce(col,1)!=-1"
                     ng-class="{red:showProce(col,1)==0,yellow:showProce(col,1)==1,blue:showProce(col,1)==2,green:showProce(col,1)==3}">
                  {{showHead(col,1)}}
                </div>
                <div class="procBar"
                     style="top: 15px;"
                     ng-if="showProce(col,2)!=-1"
                     ng-class="{red:showProce(col,2)==0,yellow:showProce(col,2)==1,blue:showProce(col,2)==2,green:showProce(col,2)==3}">
                  {{showHead(col,2)}}
                </div>
                <div class="procBar"
                     style="top: 30px;"
                     ng-if="showProce(col,3)!=-1"
                     ng-class="{red:showProce(col,3)==0,yellow:showProce(col,3)==1,blue:showProce(col,3)==2,green:showProce(col,3)==3}">
                  {{showHead(col,3)}}
                </div>
              </div>
            </div>
          </div>
          <ion-list ng-if="$index===selectedData.weekindex" class="date-form">
            <ion-item style="font-size: 13px;" class="item-icon-left item-borderless"
                      ng-repeat="task in selectedData.tasks">
              <i style="font-size: 18px" class="icon"
                 ng-class="{'ion-ios-clock-outline':task.finish==0,'ion-ios-checkmark-outline':task.finish==1}"></i>
              <span
                style="font-weight: bolder">{{task.name}}</span>
              <span
                style="float: right">{{task.dt}}</span>
            </ion-item>
          </ion-list>
        </div>
      </ion-slide>
    </ion-slide-box>
  </ion-content>

</ion-view>

